<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计图表示例</title>
    <style>
        .chart-container {
           width: 45%;
           height: 400px;
           display: inline-block;
           margin: 10px;
         }
    </style>
</head>

<body>
<div class="chart-container" id="trendChart">趋势分析（柱状图示例）</div>
<div class="chart-container" id="compareChart">对比分析（折线图示例）</div>
<div class="chart-container" id="percentageChart">占比分析（饼图示例）</div>
<div class="chart-container" id="multiDimChart">多维分析（箱线图示例）</div>

<script>
    // 趋势分析（柱状图）
    var trendChart = echarts.init(document.getElementById('trendChart'));
    var trendOption = {
      title: { text: '趋势分析示例' },
      xAxis: { type: 'category', data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] },
      yAxis: { type: 'value' },
      series: [{
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110]
      }]
    };
    trendChart.setOption(trendOption);

    // 对比分析（折线图）
    var compareChart = echarts.init(document.getElementById('compareChart'));
    var compareOption = {
      title: { text: '对比分析示例' },
      xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] },
      yAxis: { type: 'value' },
      series: [{
        type: 'line',
        data: [30, 40, 35, 50, 45],
        name: 'Series 1'
      }, {
        type: 'line',
        data: [25, 35, 30, 45, 40],
        name: 'Series 2'
      }]
    };
    compareChart.setOption(compareOption);

    // 占比分析（饼图）
    var percentageChart = echarts.init(document.getElementById('percentageChart'));
    var percentageOption = {
      title: { text: '占比分析示例' },
      series: [{
        type: 'pie',
        radius: '50%',
        data: [
          { value: 335, name: '直接访问' },
          { value: 310, name: '邮件营销' },
          { value: 234, name: '联盟广告' },
          { value: 135, name: '视频广告' }
        ]
      }]
    };
    percentageChart.setOption(percentageOption);

    // 多维分析（箱线图）
    var multiDimChart = echarts.init(document.getElementById('multiDimChart'));
    var multiDimOption = {
      title: { text: '多维分析示例' },
      xAxis: { type: 'category', data: ['A', 'B', 'C', 'D'] },
      yAxis: { type: 'value' },
      series: [{
        type: 'boxplot',
        data: [
          [10, 20, 30, 40, 50], // 数据系列1
          [15, 25, 35, 45, 55], // 数据系列2
          [12, 22, 32, 42, 52], // 数据系列3
          [8, 18, 28, 38, 48] // 数据系列4
        ]
      }]
    };
    multiDimChart.setOption(multiDimOption);
</script>
</body>

</html>